<template>
  <div class="b-person_content__box kyc">
    <div class="title">提交证件信息</div>
    <div class="buttons">
      <label v-for="item in radioData" :key="item.value">
        <input type="radio" :value="item.value" v-model="radioValue">
        <span>{{item.label}}</span>
      </label>
    </div>
    <div class="input-box">
      <div class="input-item">
        <div class="label">名字</div>
        <input type="text" placeholder="名字" v-model="firstName">
      </div>
      <div class="input-item">
        <div class="label">姓氏</div>
        <input type="text" placeholder="姓氏" v-model="lastName">
      </div>
      <div class="input-item card">
        <div class="label">身份证件号码</div>
        <input type="text" placeholder="身份证件号码" v-model="idCard">
      </div>
    </div>
    <div class="title">{{radioValue==="idCard"?"上传身份证": "上传护照"}}</div>
    <div class="title-small">为方便审核，请上传清晰图片</div>
    <div class="upload-box">
      <label>
        <input type="file">
        <div class="upload-button">
          <span>{{radioValue==="idCard"?"身份证正面":"护照个人信息页"}}</span>
          <div class="prew-rect">
            <img src="../../assets/img/uploadAdd.png" alt="upload">
            <div class="button-text">点击上传</div>
          </div>
        </div>
      </label>
      <label>
        <input type="file">
        <div class="upload-button second">
          <span>身份证反面</span>
          <div class="prew-rect">
            <img src="../../assets/img/uploadAdd.png" alt="upload">
            <div class="button-text">点击上传</div>
          </div>
        </div>
      </label>
    </div>
    <button class="submit-button">提交认证</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radioValue: "idCard",
      radioData: [
        {
          label: "身份证验证",
          value: "idCard"
        },
        {
          label: "护照验证",
          value: "passport"
        }
      ],
      firstName: "",
      lastName: "",
      idCard: "",
      country: "",
      fileList: []
    };
  }
};
</script>
